<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>显示中国地图（中国地图）</title>
    <link rel="stylesheet" href="../css/ol.css" type="text/css">
    <script src="js/jquery-1.12.3.min.js"></script>
    <script src="js/mapMain.js"></script>
    <script src="../build/ol.js"></script>
</head>
<body>
<div id="map"></div>
    <script>

        var all_map;//定义地图全局变量
        var cqDataLayer;
        var zoomInit = 7;

        $(function(){
            var options = {
                id:'map',
                attribution:false
            }
            all_map = showMap(options);

            //第一次默认展示级别的数据
            setCqDataLayer(zoomInit);
            all_map.addOverlay(cqDataLayer);

            all_map.on("moveend",function(e){
                var zoom = all_map.getView().getZoom();  //获取当前地图的缩放级别
                console.log(zoom);
                if(zoomInit != zoom){
                    all_map.removeOverlay(cqDataLayer);
                    setCqDataLayer(zoom);
                    all_map.addOverlay(cqDataLayer);
                    zoomInit = zoom;
                }else{
                    console.log("缩放级别相同，数据不变")
                }
            });
        })

        function setCqDataLayer(zoom){
            var features = [];
            var i = 0;
            var fbl;
            if(zoom>0 && zoom<=3){
                fbl = parseFloat(2);
            }else if(zoom<=6){
                fbl = parseFloat(1.6);
            }else if(zoom<=9){
                fbl = parseFloat(1.2);
            }else{
                fbl = parseFloat(1);
            }
            console.log("展示"+zoom+"层级的数据,分辨率为"+fbl);
            var startLon = parseFloat(105);
            var startLat = parseFloat(28);
            var endLon = parseFloat(111.35);
            var endLat = parseFloat(34.35);
            for(var lon=startLon; lon<=endLon; lon+=fbl){
                for(var lat=startLat; lat<=endLat; lat+=fbl){
                    var feature = new ol.Feature(new ol.geom.Point([parseFloat(lon),parseFloat(lat)]));
                    features.push(feature);
                    feature.set('value',i);
                    i++;
                }
            }

            var source = new ol.source.Vector({//提供矢量层的特性源
                features: features //特点特征[包含数据和数据类型等等]
            });

            cqDataLayer = new ol.layer.Vector({//呈现客户端的矢量数据
                source: source,
                style: function(feature) {//图层样式
                    var num = feature.get('value');
                    var style = new ol.style.Style({
                        image: new ol.style.Circle({//圆
                            radius: 10,//半径
                            stroke: new ol.style.Stroke({//笔画
                                color: '#fff'//颜色白色
                            }),
                            fill: new ol.style.Fill({
                                color: '#3399CC'//填充蓝色
                            })
                        }),
                        text: new ol.style.Text({//文本
                            text: num.toString(),
                            fill: new ol.style.Fill({
                                color: '#fff'//填充白色
                            })
                        })
                    });
                    return style;
                }
            });
        }

    </script>
</body>
</html>